<template>
  <view class="share" v-if="shareState">
    <view class="share-box" @click.stop="handleHiddenShare">
      <!-- <view :class="{ 'share-box': shareState }" @click="handleHiddenShare"> -->
    </view>
    <view class="share-item" :class="{ 'share-show': shareState }">
      <view class="share-to">
        <text>分享到</text>
      </view>
      <view class="content">
        <view class="block" @click.stop="goWeixin">
          <button class="wechat" open-type="share">
            <image
              src="@/static/images/weixin.png"
              mode="aspectFill"
			  class="wechat_img"
            ></image>
            <text class="wechat_text">微信</text>
          </button>
        </view>

        <!-- <view class="block" @click="toUrl()">
          <button class="moment">
            <image src="/static/images/pic_yt_xingzhegushi_one.png" mode="aspectFill"></image>
            <text>朋友圈</text>
          </button>
        </view> -->
      </view>
      <view class="cancel" @click.stop="handleHiddenShare">
        <text>取消</text>
      </view>
    </view>
  </view>
</template>
 
<script>
export default {
  props: {
    carInfo: [],
  },
  data() {
    return {
      shareState: false,
    };
  },
  onShareAppMessage(res) {
    return {
      title: "页面分享的标题",
      path: "/pages/my/my",
      imageUrl: "/static/imgs/mylogo.png",
    };
  },
  methods: {
    toUrl() {
      //   uni.navigateTo({
      //     url: "/pages/share/poster?carId=" + this.carInfo.car_id,
      //   });
      //   this.handleHiddenShare();
    },
    // 显示分享
    handleShowShare() {
      this.shareState = true;
      uni.hideLoading();
    },
    // 隐藏分享
    handleHiddenShare() {
      this.shareState = false;
    },
    goWeixin() {
      uni.share({
        provider: "weixin",
        scene: "WXSceneSession",
        type: 1,
        summary: "欢迎使用华胥星球APP! https://hx.yitian369.net/web/#/",
        href:'https://hx.yitian369.net/web/#/',
        success: function (res) {
          console.log("分享成功:" + JSON.stringify(res));
        },
        fail: function (err) {
          console.log("分享失败:" + JSON.stringify(err));
        },
      });
    },
  },
};
</script>
 
<style lang="less">
button::after {
  border: initial;
}
.share {
	width: 750rpx;
	height: 100vh;
  // width: 100%;
  // height: 100%;
}

.share-box {
  // width: 100%;
  // height: 100%;
  position: fixed;
  top: 0rpx;
  left: 0rpx;
  bottom: 0rpx;
  right: 0rpx;
  background-color: rgba(0, 0, 0, 0.4);
  transition: 0.3s;
  z-index: 999;
}

.block > .wechat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: white;
  border-style: none;
  width: 150rpx;
  height: 180rpx;
  // outline:none;
  // opacity: 0;
}

// 进入分享动画
.share-show {
  // width: 100%;
  height: auto;
  transition: all 0.3s ease;
  transform: translateY(0%) !important;
}

// 离开分享动画
.share-item {
  position: fixed;
  left: 0;
  bottom: 0;
  // width: 100%;
  width: 750rpx;
  height: 500rpx;
  // height: auto;
  background-color: #ffffff;
  transition: all 0.3s ease;
  transform: translateY(100%);
  z-index: 1999;

  .share-to {
	  width: 750rpx;
	  height: 100rpx;
    // width: 100%;
    // height: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;

    &::after {
      content: "";
      width: 240rpx;
      height: 0rpx;
      border-top: 1px solid #e4e7ed;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
      margin-left: 30rpx;
    }

    &::before {
      content: "";
      width: 240rpx;
      height: 0rpx;
      border-top: 1px solid #e4e7ed;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
      margin-right: 30rpx;
    }
  }

  .content {
    // width: 100%;
	width: 750rpx;
    // height: auto;
	height:300rpx;
    display: flex;
	flex-direction: row;
    flex-wrap: wrap;

    .block {
      //   width: 50%;
	  
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
	  width: 150rpx;
      height: 180rpx;
	  margin-left: 20rpx;

      .wechat_img {
        width: 80rpx;
        height: 80rpx;
      }

      .wechat_text {
        margin-top: 16rpx;
        font-size: 28rpx;
        color: #606266;
      }
    }
  }

  .cancel {
    // width: 100%;
	width: 750rpx;
    height: 100rpx;
    display: flex;
	flex-direction: row;
    justify-content: center;
    align-items: center;
    border-top: 1rpx solid #e4e7ed;
  }
}
</style>